<template>
  <div class="plannedIncome">
    <div class="flex">
      <!-- 业态收入占比图 -->
      <div class="region-box blue-border">
        <div class="title">业态收入占比图</div>
        <div id="incomeProportionChart" ref="incomeProportionChart" style="width: 100%; height: 60%"></div>
        <tableBox :data="incomeProportionData" :thead-list="incomeProportionThead" :showThead="true">
        </tableBox>

      </div>
      <!-- 地区收入占比图 -->
      <div class="month-box blue-border">
        <div class="title">地区收入占比图</div>
        <div id="regionalIncomeChart" style="width: 100%; height: 90%"></div>
      </div>
    </div>
    <!-- 项目合同金额 -->
    <div class="item-box blue-border">
      <tableBox :data="itemnData" :thead-list="itemThead" :showThead="true" :itemTheadStyle="itemTheadStyle"
        :showSerialNumber="true">
      </tableBox>
    </div>
  </div>
</template>
<script>

import tableBox from "./table-box.vue";
import {
  getFinanceReportBIContractMoney,
  getFinanceReportBIContractMoneyByRegionRate,
  getFinanceReportBIProjectContractMoneyList
} from "@/api/cld/financeReportBINew";
import * as echarts from "echarts";

export default {
  components: { tableBox },
  data() {
    return {
      itemThead: [
        "序号",
        "项目名称",
        "地区",
        "业态",
        "合同人数",
        "合同单价(人/月)",
        "合同金额(月)",
        "年合同金额",
        "合同总金额",
        "合同开始时间",
        "合同到期时间",
        "合同到期天数",
        "占比"
      ],
      itemTheadStyle: 'padding:16px 10px',
      itemnData: [],
      incomeProportionThead: [''],
      incomeProportionData: [
        [{ val: '其他' }, { val: '100' }, { val: '200' }, { val: '300' }],
        [{ val: '小区' }, { val: '100' }, { val: '200' }, { val: '300' }],
        [{ val: '商业' }, { val: '100' }, { val: '200' }, { val: '300' }]
      ]
    };
  },
  mounted() {
    this.getIncomeProportionData();
    this.getProjectMoney()
    this.getIncomeProportion()
    this.getRegionalIncome()
  },
  methods: {
    // 千分位格式化并保留两位小数
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 获取项目金额
    async getProjectMoney() {
      const { data: res } = await getFinanceReportBIProjectContractMoneyList();
      let arr = []
      res.forEach(item => {
        arr.push([{ val: item.projectName, style: 'padding:16px 10px' }, { val: item.city }, { val: item.business }, { val: item.contractNumber }, { val: this.formatPrice(item.contractStaffMoney) }, { val: this.formatPrice(item.contractMonthMoney) }, { val: this.formatPrice(item.contractYearMoney) }, { val: this.formatPrice(item.contractMoney) }, { val: item.contractStartDate }, { val: item.contractEndDate }, { val: item.contractEndDay }, { val: item.contractMoneyRate + '%' }])
      })
      this.itemnData = arr
    },
    // 格式化
    abilitySort(arr, property) {
      let map = {};
      for (let i = 0; i < arr.length; i++) {
        const ai = arr[i];
        if (!map[ai[property]]) map[ai[property]] = [ai];
        else map[ai[property]].push(ai);
      }
      let res = [];
      Object.keys(map).forEach((key) => {
        res.push({ [property]: key, data: map[key] });
      });
      return res;

    },
    // 获取合同总金额
    async getIncomeProportionData() {
      const { data: res } = await getFinanceReportBIContractMoney();
      let data = this.abilitySort(res, 'city')
      let xAxis = []
      let business = []
      let residential = []
      let other = []
      data.forEach(item => {
        this.incomeProportionThead.push(item.city)
        xAxis.push(item.city)
        for (let i = 0; i < item.data.length; i++) {
          if (item.data[i].business === '小区') {
            business.push(item.data[i].contractMoney)
          }
          if (item.data[i].business === "商业综合体") {
            residential.push(item.data[i].contractMoney)
          }
          if (item.data[i].business === '其他') {
            other.push(item.data[i].contractMoney)
          }
        }
      })
      let series = [
        {
          name: '小区',
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: business
        },
        {
          name: '商业综合体',
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: residential
        }, {
          name: '其他',
          type: 'bar',
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          data: other
        }
      ]

      this.getIncomeProportion(xAxis, series)


      let arr1 = [{ val: '商业综合体' }]
      residential.forEach(item => {
        arr1.push({ val: this.formatPrice(item) })
      })
      let arr2 = [{ val: '小区' }]
      business.forEach(item => {
        arr2.push({ val: this.formatPrice(item) })
      })
      let arr3 = [{ val: '其他' }]
      other.forEach(item => {
        arr3.push({ val: this.formatPrice(item) })
      })
      this.incomeProportionData = [arr1, arr2, arr3]

    },

    // 获取饼图数据
    async getRegionalIncome() {
      const { data: res } = await getFinanceReportBIContractMoneyByRegionRate();
      const data = [];
      res.forEach((item, index) => {
        data.push({ value: item.contractMoneyRate, name: item.paramsName });

      });

      this.initPieChart(data)
    },

    // 业态收入占比图
    getIncomeProportion(xAxis, series) {
      this.chart = echarts.init(document.getElementById('incomeProportionChart'));
      this.chart.setOption({
        xAxis: {
          type: "category",
          data: xAxis
        },
        yAxis: {
          type: "value",
        },
        grid: {
          top: "4%",
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: series,
      });
    },

    initPieChart(data) {
      this.chart = echarts.init(document.getElementById('regionalIncomeChart'))
      this.chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 20,
          top: 'center',
        },
        series: [
          {
            type: 'pie',
            label: {
              normal: {
                formatter: '{b}\n{c}%'
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value
              }
            },
            data: data
          }
        ]
      })
    },
  }
}
</script>
<style lang="scss" scoped>
@import 'border.css';

.plannedIncome {
  width: 100%;
  height: 100%;

  .title {
    font-weight: 600;
    font-size: 20px;
    color: #000000;
    height: 10%;
    text-align: center;
    margin-bottom: 10px;
  }

  .flex {
    display: flex;
    justify-content: space-between;
    height: 46%;
  }

  .region-box {
    width: 60%;
    margin-right: 26px;
    box-sizing: border-box;
    padding: 30px;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;

    .pie-box {
      width: 48%;
      height: 100%;
    }

    >div:nth-child(2) {
      width: 50%;
      display: flex;
      flex-direction: column;

      >div {
        flex-grow: 1;
      }
    }
  }

  .month-box {
    width: 40%;
    padding: 30px;
    display: flex;
    flex-direction: column;

    .title {
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        flex-shrink: 0;
        margin-left: 10px;
      }

      .el-select {
        width: 120px;
      }
    }

    >div:nth-child(3) {
      flex-grow: 1;
    }
  }

  .item-box {
    margin-top: 24px;
    width: 100%;
    height: 52%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    >div:nth-child(2) {
      flex-grow: 1;
    }

  }
}
</style>